<template>
  <view class="payment-list-page">
    <!-- 统计概览 -->
    <view class="stats-section">
      <view class="stats-card">
        <view class="stats-item">
          <text class="stats-number">{{ statistics.totalCount }}</text>
          <text class="stats-label">总记录数</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">¥{{ statistics.totalAmount }}</text>
          <text class="stats-label">总金额</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">{{ statistics.successCount }}</text>
          <text class="stats-label">成功笔数</text>
        </view>
      </view>
    </view>

    <!-- 搜索筛选 -->
    <view class="search-filter">
      <view class="filter-card">
        <view class="filter-row">
          <view class="filter-item">
            <u-input
              :value="searchForm.keyword"
              placeholder="搜索订单号或费用类型"
              prefix-icon="search"
              clearable
              @input="handleKeywordInput"
            />
          </view>
          <view class="filter-item">
            <u-select
              :value="searchForm.status"
              :list="statusOptions"
              placeholder="支付状态"
              @change="handleStatusChange"
            />
          </view>
        </view>
        <view class="filter-row">
          <view class="filter-item">
            <u-input
              :value="searchForm.startDate"
              placeholder="开始日期"
              readonly
              @click="showStartDatePicker = true"
            />
          </view>
          <view class="filter-item">
            <u-input
              :value="searchForm.endDate"
              placeholder="结束日期"
              readonly
              @click="showEndDatePicker = true"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 支付记录列表 -->
    <view class="payment-list">
      <view 
        v-for="item in filteredPaymentList" 
        :key="item.id"
        class="payment-item"
        @click="viewPaymentDetail(item)"
      >
        <view class="payment-header">
          <view class="payment-info">
            <text class="order-no">{{ item.orderNo }}</text>
            <u-tag 
              :text="getStatusText(item.status)" 
              :type="getStatusType(item.status)" 
              size="mini"
            />
          </view>
          <view class="payment-amount">
            <text class="amount">¥{{ item.amount }}</text>
          </view>
        </view>
        
        <view class="payment-detail">
          <view class="detail-row">
            <text class="detail-label">费用类型：</text>
            <text class="detail-value">{{ item.feeTypeName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">支付方式：</text>
            <text class="detail-value">{{ item.paymentMethodName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">支付时间：</text>
            <text class="detail-value">{{ item.paymentTime }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">房号：</text>
            <text class="detail-value">{{ item.roomNumber }}</text>
          </view>
        </view>
        
        <view class="payment-actions">
          <u-button 
            v-if="item.status === '2'"
            size="mini" 
            type="primary" 
            @click.stop="viewInvoice(item)"
          >
            查看发票
          </u-button>
          <u-button 
            v-if="item.status === '3'"
            size="mini" 
            type="warning" 
            @click.stop="retryPayment(item)"
          >
            重新支付
          </u-button>
          <u-button 
            size="mini" 
            type="info" 
            @click.stop="viewPaymentDetail(item)"
          >
            查看详情
          </u-button>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <u-loadmore 
      :status="loadmoreStatus"
      @loadmore="loadMore"
    />

    <!-- 日期选择器 -->
    <u-picker
      :show="showStartDatePicker"
      mode="date"
      @confirm="handleStartDateChange"
      @cancel="showStartDatePicker = false"
    />
    <u-picker
      :show="showEndDatePicker"
      mode="date"
      @confirm="handleEndDateChange"
      @cancel="showEndDatePicker = false"
    />
  </view>
</template>

<script setup>
/**
 * 支付记录页面
 * @author Wu.Liang
 * @date 2025-01-21
 */

import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchForm = ref({
  keyword: '',
  status: '',
  startDate: '',
  endDate: ''
})

const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)
const loadmoreStatus = ref('more')

// 状态选项
const statusOptions = ref([
  { label: '全部状态', value: '' },
  { label: '待支付', value: '0' },
  { label: '支付中', value: '1' },
  { label: '支付成功', value: '2' },
  { label: '支付失败', value: '3' },
  { label: '已退款', value: '4' }
])

// 支付记录数据
const paymentList = ref([
  {
    id: 1,
    orderNo: 'PAY202501210001',
    amount: '156.00',
    feeTypeName: '物业费',
    paymentMethodName: '微信支付',
    paymentTime: '2025-01-21 14:30:25',
    roomNumber: '1栋1单元101室',
    status: '2'
  },
  {
    id: 2,
    orderNo: 'PAY202501200002',
    amount: '89.50',
    feeTypeName: '停车费',
    paymentMethodName: '支付宝',
    paymentTime: '2025-01-20 16:45:12',
    roomNumber: '2栋2单元205室',
    status: '2'
  },
  {
    id: 3,
    orderNo: 'PAY202501190003',
    amount: '234.00',
    feeTypeName: '物业费',
    paymentMethodName: '银行卡',
    paymentTime: '2025-01-19 09:15:33',
    roomNumber: '3栋1单元301室',
    status: '2'
  },
  {
    id: 4,
    orderNo: 'PAY202501180004',
    amount: '67.80',
    feeTypeName: '卫生费',
    paymentMethodName: '微信支付',
    paymentTime: '2025-01-18 11:22:45',
    roomNumber: '1栋2单元102室',
    status: '2'
  },
  {
    id: 5,
    orderNo: 'PAY202501170005',
    amount: '189.00',
    feeTypeName: '物业费',
    paymentMethodName: '支付宝',
    paymentTime: '2025-01-17 15:30:18',
    roomNumber: '2栋1单元201室',
    status: '3'
  },
  {
    id: 6,
    orderNo: 'PAY202501160006',
    amount: '45.60',
    feeTypeName: '停车费',
    paymentMethodName: '微信支付',
    paymentTime: '2025-01-16 08:45:30',
    roomNumber: '3栋2单元302室',
    status: '2'
  },
  {
    id: 7,
    orderNo: 'PAY202501150007',
    amount: '123.45',
    feeTypeName: '物业费',
    paymentMethodName: '银行卡',
    paymentTime: '2025-01-15 13:20:15',
    roomNumber: '1栋1单元103室',
    status: '2'
  },
  {
    id: 8,
    orderNo: 'PAY202501140008',
    amount: '78.90',
    feeTypeName: '卫生费',
    paymentMethodName: '支付宝',
    paymentTime: '2025-01-14 10:35:42',
    roomNumber: '2栋2单元206室',
    status: '2'
  }
])

// 统计信息
const statistics = computed(() => {
  const totalCount = paymentList.value.length
  const totalAmount = paymentList.value
    .filter(item => item.status === '2')
    .reduce((sum, item) => sum + parseFloat(item.amount), 0)
    .toFixed(2)
  const successCount = paymentList.value.filter(item => item.status === '2').length
  
  return {
    totalCount,
    totalAmount,
    successCount
  }
})

// 筛选后的支付列表
const filteredPaymentList = computed(() => {
  let records = paymentList.value
  
  // 关键词搜索
  if (searchForm.value.keyword) {
    records = records.filter(item => 
      item.orderNo.includes(searchForm.value.keyword) ||
      item.feeTypeName.includes(searchForm.value.keyword)
    )
  }
  
  // 状态筛选
  if (searchForm.value.status) {
    records = records.filter(item => item.status === searchForm.value.status)
  }
  
  // 日期筛选
  if (searchForm.value.startDate) {
    records = records.filter(item => 
      new Date(item.paymentTime) >= new Date(searchForm.value.startDate)
    )
  }
  
  if (searchForm.value.endDate) {
    records = records.filter(item => 
      new Date(item.paymentTime) <= new Date(searchForm.value.endDate)
    )
  }
  
  return records
})

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    '0': '待支付',
    '1': '支付中',
    '2': '支付成功',
    '3': '支付失败',
    '4': '已退款'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    '0': 'warning',
    '1': 'info',
    '2': 'success',
    '3': 'error',
    '4': 'info'
  }
  return typeMap[status] || 'info'
}

// 日期选择处理
const handleStartDateChange = (e) => {
  searchForm.value.startDate = e.detail.value
  showStartDatePicker.value = false
}

const handleEndDateChange = (e) => {
  searchForm.value.endDate = e.detail.value
  showEndDatePicker.value = false
}

// 搜索关键词输入处理
const handleKeywordInput = (e) => {
  searchForm.value.keyword = e.detail.value
}

// 状态选择处理
const handleStatusChange = (e) => {
  searchForm.value.status = e.detail.value
}

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

// 查看支付详情
const viewPaymentDetail = (item) => {
  uni.navigateTo({
    url: `/pages/payment/detail?id=${item.id}`
  })
}

// 查看发票
const viewInvoice = (item) => {
  uni.navigateTo({
    url: `/pages/payment/invoice?orderNo=${item.orderNo}`
  })
}

// 重新支付
const retryPayment = (item) => {
  uni.showToast({
    title: '重新支付功能开发中',
    icon: 'none'
  })
}

// 加载更多
const loadMore = async () => {
  loadmoreStatus.value = 'loading'
  try {
    // 模拟加载更多数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    loadmoreStatus.value = 'noMore'
  } catch (error) {
    loadmoreStatus.value = 'noMore'
  }
}

// 页面加载
onMounted(() => {
  console.log('支付记录页面加载完成')
  console.log('支付记录数据:', paymentList.value)
  console.log('统计信息:', statistics.value)
})
</script>

<style lang="scss" scoped>
.payment-list-page {
  min-height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.stats-section {
  padding: 20px 16px 16px;
  
  .stats-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .stats-item {
      text-align: center;
      
      .stats-number {
        display: block;
        font-size: 24px;
        font-weight: 600;
        color: #1890ff;
        margin-bottom: 4px;
      }
      
      .stats-label {
        display: block;
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.search-filter {
  padding: 0 16px 16px;
  
  .filter-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .filter-row {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .filter-item {
        flex: 1;
      }
    }
  }
}

.payment-list {
  padding: 0 16px;
  
  .payment-item {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .payment-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .payment-info {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .order-no {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .payment-amount {
        .amount {
          font-size: 18px;
          font-weight: 600;
          color: #f5222d;
        }
      }
    }
    
    .payment-detail {
      margin-bottom: 16px;
      
      .detail-row {
        display: flex;
        margin-bottom: 6px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-label {
          font-size: 13px;
          color: #666;
          width: 80px;
          flex-shrink: 0;
        }
        
        .detail-value {
          font-size: 13px;
          color: #333;
          flex: 1;
        }
      }
    }
    
    .payment-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 480px) {
  .payment-list-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
  
  .stats-card {
    padding: 16px;
    
    .stats-item .stats-number {
      font-size: 20px;
    }
  }
  
  .filter-card .filter-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .payment-item {
    padding: 12px;
    
    .payment-header .payment-info .order-no {
      font-size: 15px;
    }
    
    .payment-amount .amount {
      font-size: 16px;
    }
  }
}

@media screen and (min-width: 414px) {
  .payment-list-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style> 